(function () {
    let template = `
    <div>
    <header>
    <div class="menu">1</div>
    <div class="title">2</div>
    <div class="user-info">
        <b class="avatar">
            <img src="https://chst.vip/images/img-1680853939461.jpg" alt="">
        </b>
        <b>卢本伟</b>
    </div>
    </header>
    <main>
    <table class="list">
        <thead>
            <tr>
                <th>
                    头像
                </th>
                <th>
                    姓名
                </th>
                <th>
                    班级
                </th>
                <th>
                    城市
                </th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in categoryList" :key="item._id">
                <td>
                    <img width="60"  :src="item.headimgurl" />
                </td>
                <td>
                    {{item.name}}
                </td>
                <td>
                    {{item.class}}
                </td>
                <td>
                    {{item.city}}
                </td>
                <td>
                    <button>查看</button>
                    <button>增加</button>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    </main>
    </div>
`

    //请求列表数据的接口

    //http://chst.vip/students/getstulist
    //MEHTOD:get
    //param:no param
    //headers: {authorization:'token'}
    Vue.component('list-page', {
        data() {
            return {
                //类目列表
                categoryList: []
            }
        },
        template,
        //组件挂载之后执行的钩子
        async mounted() {
            //发起请求
            try {
                let res = await fetch('http://chst.vip/students/getstulist', {
                    //携带token
                    headers: {
                        authorization: localStorage.getItem('wq-token')
                    }
                })
                    .then(response => response.json())

                //解构参数
                let {state, msg, data} = res;

                //判断登入的状态
                if (state) {
                    //获取数据成功
                    this.categoryList = data;
                } else {
                    //获取数据失败
                    alert(msg)
                }

            } catch (e) {
                alert(e.toString())
            }
        }
    })
})()